<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
	<title>Title</title>
	<link rel="stylesheet" href="swiper.css">
	<style>
		html{
			touch-action: none;
		}

		html, body{
			margin: 0;
			min-height: 100%;
		}

		hr{
			border: none;
			border-bottom: 1px solid #e6e6e6;
		}

		nav{
			width: 100%;
			margin: 20px 0;
		}

			nav > .swiper-wrapper{
				position: relative;
			}

			nav div.swiper-slide{
				width: auto;
				padding: 0 15px;
			}

			nav .mark{
				content: '';
				display: block;
				position: absolute;
				bottom: -5px;
				width: 20px;
				height: 5px;
				margin-left: -10px;
				border-radius: 10px;
				background: #1E88A8;
			}

			nav::after{
				content: '';
				display: block;
				clear: both;
			}

		main {
			width: 100%;
			margin-top: 20px;
		}

			main .main-content{
				padding: 0 20px;
			}

				.popular{
					margin-top: 10px;
				}

				.recommend{
					display: flex;
					justify-content: space-between;
					margin-top: 30px;
				}

					.recommend-item{
						width: 45%;
					}

				.img{
					display: block;
					padding-bottom: 56.25%;
					background-color: #eee;
					border-radius: 4px;
				}

				p{
					height: 12px;
					margin: 10px 0;
					background-color: #eee;
					border-radius: 10px;
				}

	</style>
</head>
<body>

	<nav>
		<div class="swiper-wrapper">
			<div class="swiper-slide" data-theme-bg="#58C9B9" data-theme-font="#519D9E">电影</div>
			<div class="swiper-slide" data-theme-bg="#F17F42" data-theme-font="#FFEEE4">电视剧</div>
			<div class="swiper-slide" data-theme-bg="#E0E3DA" data-theme-font="#A593E0">本地生活</div>
			<div class="swiper-slide" data-theme-bg="#EE7785" data-theme-font="#84B1ED">体育</div>
			<div class="swiper-slide" data-theme-bg="#8283a7" data-theme-font="#404146">动漫</div>
			<div class="swiper-slide" data-theme-bg="#60c5ba" data-theme-font="#a5dff9">少儿</div>
			<span class="mark"></span>
		</div>
	</nav>

	<hr>

	<main>
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="main-content">

					<div class="popular">
						<div class="img"></div>
						<p></p>
						<p></p>
					</div>

					<div class="recommend">

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

					</div>

				</div>
			</div>
			<div class="swiper-slide">
				<div class="main-content">

					<div class="popular">
						<div class="img"></div>
						<p></p>
						<p></p>
					</div>

					<div class="recommend">

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

					</div>

				</div>
			</div>
			<div class="swiper-slide">
				<div class="main-content">

					<div class="popular">
						<div class="img"></div>
						<p></p>
						<p></p>
					</div>

					<div class="recommend">

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

					</div>

				</div>
			</div>
			<div class="swiper-slide">
				<div class="main-content">

					<div class="popular">
						<div class="img"></div>
						<p></p>
						<p></p>
					</div>

					<div class="recommend">

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

					</div>

				</div>
			</div>
			<div class="swiper-slide">
				<div class="main-content">

					<div class="popular">
						<div class="img"></div>
						<p></p>
						<p></p>
					</div>

					<div class="recommend">

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

					</div>

				</div>
			</div>
			<div class="swiper-slide">
				<div class="main-content">

					<div class="popular">
						<div class="img"></div>
						<p></p>
						<p></p>
					</div>

					<div class="recommend">

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

						<div class="recommend-item">

							<div class="img"></div>
							<p></p>
							<p></p>

						</div>

					</div>

				</div>
			</div>
		</div>
	</main>

	<script type="text/javascript" src="TweenMax.min.js"> </script>
	<script type="text/javascript" src="TimelineMax.min.js"></script>
	<script type="text/javascript" src="swiper.js"></script>

	<script>

		( function scriptInit( doc ) {

			let currentIndex = 0; //  当前标签
			let currentRight = 0; //  当前标签右边距离父元素左边的距离
			let currentWidth = 0; //  当前标签宽度
			let _items = doc.querySelectorAll( 'nav .swiper-slide' ); //  所有导航栏目
			let _mark = doc.querySelector( '.mark' ); //  .active横线
			let themeBackgroundColor = []; //  主题背景色
			let themeFontColor = []; //  主题导航文字颜色

			/**
			 * 获取所有导航栏目元素上的主题颜色信息
			 * @description：data-theme-bg：背景色 data-theme-font：导航文字颜色
			 */
			function getThemeColors( ) {

				Array
					.from( _items )
					.forEach( function( item ) {

						themeBackgroundColor.push( item.dataset.themeBg );
						themeFontColor.push( item.dataset.themeFont );

					} )

			}

			/**
			 * 获取导航栏目元素宽度
			 * @param index：Number 导航栏目元素索引
			 * @returns { number } 元素宽度
			 */
			function getNavItemWidth( index ) {
				return _items[index].clientWidth;
			}

			/**
			 * 创建Timeline对象
			 * @description：控制.mark移动路径
			 * @returns { object } TimelineMax实例
			 */
			function createTimeLine(  ) {

				let tm = new TimelineMax();
					tm.pause();

				Array
					.from( _items )
					.forEach( function( item, index ) {

						if( currentIndex === _items.length - 1 ) { return false; }

						let nextItemWidth = getNavItemWidth( currentIndex + 1 );
						let markWidthTo = ( nextItemWidth + currentWidth ) / 2 + 20;
						let markLeftTo = ( nextItemWidth / 2 ) + currentRight;

						tm
							.add(
								[
									TweenMax.to( _mark, 1 / 10, { width: markWidthTo, backgroundColor: themeFontColor[index] } ),
									TweenMax.to( _items[index], 1 / 10, { color: '#404146' } ),
									TweenMax.to( 'html', 1 / 10, { backgroundColor: themeBackgroundColor[index] } ),
								]
							)
							.add(
								[
									TweenMax.to( _mark, 1 / 10, { width: 20, left: markLeftTo, backgroundColor: themeFontColor[index+1] } ),
									TweenMax.to( _items[index+1], 1 / 10, { color: themeFontColor[index+1] } ),
									TweenMax.to( 'html', 1 / 10, { backgroundColor: themeBackgroundColor[index+1] } ),
								]
							);

						currentIndex += 1;
						currentWidth = nextItemWidth;
						currentRight = currentRight + nextItemWidth;

					} );

				return tm;

			}

			/**
			 * 创建Swiper
			 * @param tm：Object 控制.mark的TimelineMax实例
			 * @returns { object } 总控swiper实例
			 */
			function createSwipers( tm ) {

				let tabSwiper = new Swiper ( 'nav', {
					slidesPerView: 'auto',
					spaceBetween: 0,
					freeModeMomentum: false,
					freeMode: true,
				} );

				let mySwiper = new Swiper ( 'main', {
					watchSlidesProgress: true,
					on: {
						progress: function(progress){
							if( progress < 0 || progress > 1 ) { return false; };
							tm.seek( progress );
						},
						touchEnd: function( ) {
							doc.querySelector( '.mark' ).style.transition = 'all .3s';
						},
						touchStart: function( ) {
							doc.querySelector( '.mark' ).style.transition = 'none';
						},
						transitionStart: function( ) {
							tabSwiper.slideTo( this.realIndex );
						}
					}
				} );
				
				return mySwiper;

			}

			/**
			 * 导航栏点击事件处理
			 * @param mySwiper：Object 总控swiper实例
			 */
			function eventHandler( mySwiper ) {

				Array
					.from( _items )
					.forEach( function( item, index ) {
						item.addEventListener( 'click', function( ) {
							mySwiper.slideTo( index );
						} )
					} )

			}

			/**
			 * 初始化
			 */
			function init(  ) {

				getThemeColors();

				/* 初始化.mark位置 */
				let initWidth = getNavItemWidth( currentIndex );
				_mark.style.left = initWidth / 2 + 'px';

				/* 初始化页面主题 */
				_mark.style.backgroundColor = themeFontColor[0];
				_items[0].style.color =  themeFontColor[0];
				document.documentElement.style.backgroundColor = themeBackgroundColor[0];

				currentRight = currentWidth = initWidth;

				let tm = createTimeLine();

				let ms = createSwipers( tm );
				
				eventHandler( ms );

			}

			init();

		} )( document );

	</script>

</body>
</html>